<template>
    <div id="main-login">
        
        <div id="login">
            <div id="login-title">
                <span>muke micro cloud</span>
            </div>
          
            <el-form :model="user" :rules="rules" ref="user"  class="demo-ruleForm">
                <el-form-item  prop="mail"  required>
                    <el-input type="text" prefix-icon='el-icon-user-solid' v-model="user.mail"  placeholder="邮箱" ></el-input>
                </el-form-item>
                <el-form-item prop="pwd" required>
                    <el-input type="password" prefix-icon='el-icon-lock' v-model="user.pwd" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-button id="loginBtn"  style="width:100%" :loading="loading" type="primary" @click="login('user')">{{ loading ? '登录中 ...' : '登 录' }}</el-button>
                    <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                </el-form-item> 
            </el-form>
            <span style="font-size:15px;font-weight:600;float:right">还没账号<i class="el-icon-question"></i>   
                <a href="/#/register"> 去注册 </a></span>
            <span style="font-size:15px;font-weight:600;float:right">  
                <a href="/#/forget"> 忘记密码 </a>&nbsp;&nbsp;&nbsp;</span>    
        </div>
    </div>
    
</template>

<script>
// 回车登录实现
document.onkeydown = function(e){
  var ev = document.all ? window.event : e;
  if(ev.keyCode==13) {
    $("#loginBtn").click();
  }
}
import api from '../../utils/api';
import util from '../../utils/util';
export default {
    mounted(){
      // 丢弃浏览器首次对网站的查询
      this.initQuery();
    },
    data() {
      return {
        user: {
          mail: '',
          pwd:''
        },
        rules: {
          mail: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 20, message: '长度在 6 到 20个字符', trigger: 'blur' }
          ]
        },
        loading:false
      };
    },
    methods: {
      initQuery() {
        this.$axios.get(util.API_HOST + '/user/check',{})
        .then(()=>{}).catch(()=>{});
      },
      login(formName) {
        
        this.$refs[formName].validate((valid) => {
          // 获取user对象
          let user = this.$refs[formName].model;

          if (valid) {
            this.loading = true;
              // 前端校验成功
              // 发送http请求
            this.$axios.post(util.API_HOST + '/user/userLogin',
            {
                email:user.mail,
                password:user.pwd
            }).then(response =>{
                let result = response.data;
                this.loading = false;
                console.log(response);
                if(result.code === 200){
                  // 成功跳转主页面
                  console.log()
                  this.$router.push('/main').catch(()=>{})
                } else {
                  this.$notify.error({
                    title: 'error',
                    message: result.message
                  });
                }
                
            }).catch(err => {
                this.$notify.error({
                  title: 'error',
                  message: err.message
                });
                this.loading = false;
            })
            
          } else {
            // 校验不通过
            return false;
          }
        });
        
        
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }


</script>

<style  scoped>
    #main-login{
        background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;/*实现水平居中*/
        align-items:center; /*实现垂直居中*/
    }
    #login-title{
        text-align: center;padding-top: 5px;padding-bottom: 5px;
        font-family: Poppins;font-size: 40px;font-weight: 700;
    }
    #login{
        width: 30%;
    }
    .demo-ruleForm{
        margin: 0 auto;width: 100%;
        
    }

</style>